import React from 'react';
import {Button, Space} from 'antd';
import {DownOutlined} from '@ant-design/icons';
import QueueAnim from 'rc-queue-anim';
import TweenOne from 'rc-tween-one';
import {isImg} from './utils';

class Banner extends React.PureComponent {
    render() {
        const {...currentProps} = this.props;
        const {dataSource} = currentProps;
        delete currentProps.dataSource;
        delete currentProps.isMobile;
        return (
            <div {...currentProps} {...dataSource.wrapper}>
                <QueueAnim
                    key="QueueAnim"
                    type={['bottom', 'top']}
                    delay={200}
                    {...dataSource.textWrapper}
                >

                    <Space direction='vertical'>
                        <div key="title" {...dataSource.title}>
                            {typeof dataSource.title.children === 'string' &&
                            dataSource.title.children.match(isImg) ? (
                                <img src={dataSource.title.children} width="100%" alt="img"/>
                            ) : (
                                dataSource.title.children
                            )}
                        </div>
                        <div key="content" {...dataSource.content}>
                            {dataSource.content.children}
                        </div>
                        <Button ghost key="button" {...dataSource.button}>
                            {dataSource.button.children}
                        </Button>
                    </Space>

                </QueueAnim>
                <TweenOne
                    animation={{
                        y: '-=20',
                        yoyo: true,
                        repeat: -1,
                        duration: 1000,
                    }}
                    className="banner0-icon"
                    key="icon"
                >
                    <a href='/translate'><DownOutlined/></a>
                </TweenOne>
            </div>
        );
    }
}

export default Banner;
